
<extend name="Public/base" />
<block name="style">
    <style>
        #uploadVideoBtn{
            width: 120px;
            height: 30px;
            line-height: 30px;
            border: 1px solid #ccc;
            border-radius: 5px;
            text-align: center;
            background: #FFFFFF;
        }
    </style>
</block>
<block name="body">
    <link href="/Public/static/weui/dist/lib/weui.css" rel="stylesheet" type="text/css">
    <link href="/Public/static/weui/dist/css/jquery-weui.css" rel="stylesheet" type="text/css">

    <script type="text/javascript" src="__STATIC__/uploadify/jquery.uploadify.min.js"></script>
    <script type="text/javascript" src="/Public/static/jquery-2.0.3.min.js"></script>
    <script type="text/javascript" src="__STATIC__/qiniu.js"></script>

    <div class="main-title">
        <h2>{$meta_title}</h2>
    </div>

    <form action="" method="post" class="form-horizontal" enctype="multipart/form-data">
        <video src="{$url}" controls="controls" width="300px" height="auto"></video>
    </form>

    <hr>


    <input id="video" class="audio-input" type="file" accept="video/*" style="display: none;">
    <div id="uploadVideoBtn">上传视频</div>

    <div class="weui-progress" style="width: 300px; margin-top: 10px;">
        <div class="weui-progress__bar" style="height: 6px;border: 1px solid #ccc">
            <div class="weui-progress__inner-bar js_progress" id="progress" style="width: 0%;"></div>
        </div>
    </div>
    <script type="text/javascript">
        $("#uploadVideoBtn").click(function (){
            $("#video").trigger("click");
        })
        $("#video").on("change", function () {
            if (!this.files[0]) return;
            file = this.files[0];
            sendVideo(file);
        });
        //上传视频
        function sendVideo(file) {
            var suffix = file.name.split(".");
            suffix = "." + suffix[suffix.length - 1];
            var observable = qiniu.upload(file, new Date().getTime() + suffix, '{$token}'); //这里需要获取七牛的token 在后端获取传到前台
            observable.subscribe(function (ret) {
                // console.log("上传中"+parseInt(ret.total.percent)+"%...");
                $('#progress').css('width', parseInt(ret.total.percent) + '%')
            }, function (err) {
                console.log(err)
            }, function (ret) {
                //上传完成后继续业务逻辑
                console.log('上传视频完成');
                layer.msg('上传视频完成')
                console.log(ret)
            });
        }
    </script>



</block>

<block name="script">
    <script src="__STATIC__/thinkbox/jquery.thinkbox.js"></script>
    <script type="text/javascript">
        //导航高亮
        highlight_subnav('{:U("Manage/test")}');
    </script>
</block>
